Component({
  properties: {
      name: {
          type: 'String',
          value: '小明'
      },
      age: Number,
      allArray:{
        type:'Array',
        // value:[],
      },
      multiArray:{
        type:'Array',
        // value:[],
      },
      nameArray:{
        type:'String',
        value:''
      },
      city_id:{
        type:'String',
        value:''
      },
      area_id:{
        type:'String',
        value:''
      },
  },
// 监听传入的变量,当传入的值发生变化时,触发方法
observers: {
  'tabs': function (val) {
    // val=》就是父组件传入组件中的tabsList数据
    console.log(val);
  }
},
  data: {
      multiArray: [
          ['无脊柱动物', '脊柱动物'],
          ['全部', '扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
          // ['全部']
      ], // 展示的数据所存放的数据
      allArray: [
          {
              name: '无脊柱动物',
              id: 100,
              children: [{
                      name: '扁性动物',
                      id: 101,
                      children: [{
                              name: '猪肉绦虫',
                              id: 1001
                          },
                          {
                              name: '吸血虫',
                              id: 1002
                          },
                      ]
                  },
                  {
                      name: '线形动物',
                      id: 102,
                      children: [{
                          name: '蛔虫',
                          id: 1005
                      }]
                  },
                  {
                      name: '环节动物',
                      id: 103,
                      children: [{
                              name: '蚂蚁',
                              id: 1003
                          },
                          {
                              name: '蚂蟥',
                              id: 1004
                          },
                      ]
                  },
                  {
                      name: '软体动物',
                      id: 104,
                      children: [{
                              name: '河蚌',
                              id: 1006
                          },
                          {
                              name: '蜗牛',
                              id: 1007
                          },
                          {
                              name: '蛞蝓',
                              id: 1008
                          }
                      ]
                  },
                  {
                      name: '节肢动物',
                      id: 104,
                      children: [{
                              name: '昆虫',
                              id: 1009
                          },
                          {
                              name: '甲壳动物',
                              id: 1010
                          },
                          {
                              name: '蛛形动物',
                              id: 1011
                          },
                          {
                              name: '多足动物',
                              id: 1012
                          }
                      ]
                  },

              ]
          },
          {
              name: '脊柱动物',
              id: 10,
              children: [{
                      name: '鱼',
                      id: 11,
                      children: [{
                              name: '鲫鱼',
                              id: 14,
                          },
                          {
                              name: '带鱼',
                              id: 4444444,
                          },
                      ]
                  },
                  {
                      name: '两栖动物',
                      id: 12,
                      children: [{
                              name: '青蛙',
                              id: 16,
                          },
                          {
                              name: '娃娃鱼',
                              id: 17,
                          },
                      ]
                  },
                  {
                      name: '爬行动物',
                      id: 13,
                      children: [{
                              name: '蜥蜴',
                              id: 18,
                          },
                          {
                              name: '龟',
                              id: 19,
                          },
                          {
                              name: '壁虎',
                              id: 20,
                          },
                      ]
                  },
              ]
          }
      ], // 模拟后台返回的数据
      // multiIndex: [0,0,0], // 选中数据的下标
      multiIndex: [0,0], // 选中数据的下标
      deptId: 11, // 默认选中的数据,根据数据拿到multiArray，multiIndex来做回显
  },
  created(){
    console.log('created');
  },
  attached(){
      // const result=wx.getSystemInfoAsync();
      console.log('attached');
  },
  methods:{
    onLick() {
      console.log('onLick');
      // this.triggerEvent('like', {data: 'Hello, triggerEvent!'});
      // this.name='yes';
    },
    
  // 选中后触发
  bindMultiPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail);
    
      //id值处理
      var picker_info=e.detail.value;
      // console.log('picker_info[0]',picker_info[0]); 
      // console.log('this.allArray',this.data.allArray);
      var city_info=this.data.allArray[picker_info[0]];
      var city_id=city_info['id'];
      // console.log('city_id',city_id);
      // console.log('picker_info[1]',picker_info[1]);
      var nameArray=1;
      if(picker_info[1]==0){
        this.data.area_id=0;
        // console.log('area_id',0); 
        if(picker_info[0]==0){
          nameArray=0;
        }
      }else{
        var area_info=city_info['children'][picker_info[1]];
        // console.log('picker_info[1]',picker_info[1]);
        // console.log('area_info',area_info);
        var area_id=area_info['id'];
        this.data.area_id=area_id;
        // console.log('area_id',area_id); 
      }
      this.triggerEvent('like', {data:{city_id:city_id,area_id:area_id}});
      this.setData({
          multiIndex: e.detail.value,
          nameArray:nameArray
      })
  },
  // 列滚动后触发（静态写死的数据，方便理解）
  // bindMultiPickerColumnChange: function (e) {
  //     // e.detail.column为滚动的列
  //     console.log('修改的列为', e.detail.column, '，值为', e.detail);
  //     var data = {
  //         multiArray: this.data.multiArray,
  //         multiIndex: this.data.multiIndex
  //     };
  //     data.multiIndex[e.detail.column] = e.detail.value;
  //     switch (e.detail.column) {
  //         // 滚动第一列
  //         case 0:
  //             switch (data.multiIndex[0]) {
  //                 // 选中第一列第一行
  //                 case 0:
  //                     data.multiArray[1] = ['请选择', '扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
  //                     data.multiArray[2] = ['请选择'];
  //                     break;
  //                 // 选中第一列第一行
  //                 case 1:
  //                     data.multiArray[1] = ['请选择', '鱼', '两栖动物', '爬行动物'];
  //                     data.multiArray[2] = ['请选择'];
  //                     break;
  //             }
  //             // 第二列，第三列回到第一行
  //             data.multiIndex[1] = 0;
  //             data.multiIndex[2] = 0;
  //             break;
  //         // 滚动第二列
  //         case 1:
  //             switch (data.multiIndex[0]) {
  //                 case 0:
  //                     switch (data.multiIndex[1]) {
  //                         case 0:
  //                             data.multiArray[2] = ['请选择'];
  //                             break;
  //                         case 1:
  //                             data.multiArray[2] = ['请选择', '猪肉绦虫', '吸血虫'];
  //                             break;
  //                         case 2:
  //                             data.multiArray[2] = ['请选择', '蛔虫'];
  //                             break;
  //                         case 3:
  //                             data.multiArray[2] = ['请选择', '蚂蚁', '蚂蟥'];
  //                             break;
  //                         case 4:
  //                             data.multiArray[2] = ['请选择', '河蚌', '蜗牛', '蛞蝓'];
  //                             break;
  //                         case 5:
  //                             data.multiArray[2] = ['请选择', '昆虫', '甲壳动物', '蛛形动物', '多足动物'];
  //                             break;
  //                     }
  //                     break;
  //                 case 1:
  //                     switch (data.multiIndex[1]) {
  //                         case 0:
  //                             data.multiArray[2] = ['请选择'];
  //                             break;
  //                         case 1:
  //                             data.multiArray[2] = ['请选择', '鲫鱼', '带鱼'];
  //                             break;
  //                         case 2:
  //                             data.multiArray[2] = ['请选择', '青蛙', '娃娃鱼'];
  //                             break;
  //                         case 3:
  //                             data.multiArray[2] = ['请选择', '蜥蜴', '龟', '壁虎'];
  //                             break;
  //                     }
  //                     break;
  //             }
  //             data.multiIndex[2] = 0;
  //             console.log(data.multiIndex, data.multiArray);

  //             break;
  //     }
  //     this.setData({
  //         multiIndex: data.multiIndex,
  //         multiArray: data.multiArray
  //     });
  //     this.getDataId(data.multiIndex)
  // },
  // 列滚动后触发（通过接口数据赋值）
  bindMultiPickerColumnChange: function (e) {
      console.log('修改的列为', e.detail.column, '，值为', e.detail);
      var data = {
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
      };
      data.multiIndex[e.detail.column] = e.detail.value;
      switch (e.detail.column) {
          // 滚动第一列
          case 0:
              data.multiArray[1] = ['全部'];
              // data.multiArray[2] = ['请选择'];
              this.data.allArray[data.multiIndex[0]].children.forEach(item=>{
                  data.multiArray[1].push(item.name)
              })
              // 第二列，第三列回到第一行
              data.multiIndex[1] = 0;
              // data.multiIndex[2] = 0;
              break;
          // 滚动第二列
          case 1:
              console.log(data.multiIndex[0], data.multiIndex[1]);
              if(data.multiIndex[1] == 0){
                  // data.multiArray[2] = ['请选择'];
              }else{
                  // data.multiArray[2] = ['请选择'];
                  this.data.allArray[data.multiIndex[0]].children[data.multiIndex[1]-1].children.forEach(item=>{
                      data.multiArray[2].push(item.name)
                  })
                  console.log(data.multiArray[2]);
              }
              data.multiIndex[2] = 0;
              console.log(data.multiIndex);
 
              break;
      }
      const arr = JSON.parse(JSON.stringify(data.multiArray))
      this.setData({
          multiArray: arr,
          multiIndex: data.multiIndex
      });
      console.log(this.data.multiArray);
      this.getDataId(data.multiIndex)
  },
  // 拿到选中数据的id，根据选中数据的下标来获取数据详情
  getDataId(data) {
      var query = {}
      if (data[1] == 0) {
          query = this.data.allArray[data[0]]
      }
      if (data[2] == 0 && data[1] != 0) {
          query = this.data.allArray[data[0]].children[data[1] - 1]
      }
      if (data[2] != 0 && data[1] != 0) {
          query = this.data.allArray[data[0]].children[data[1] - 1].children[data[2] - 1]
      }
      console.log('query', query);
  },
},
  onLoad() {
      // 假如有数据回显，进入页面，拿到到了id与name，来推断multiIndex，脊柱动物， 鱼， 带鱼，选中了带鱼
      let multiIndex = [0,0,0]
      this.data.allArray.forEach((item, index) => {
          // 如果选中的是第一列的数据
          if (item.id == this.data.deptId) {
              multiIndex = [index, 0, 0]
              // this.setData({
              //     multiIndex: [index, 0, 0],
              //     multiArray: [['无脊柱动物', '脊柱动物'], ['请选择'], ['请选择']]
              // })
              return
          }
          // 如果选中的不是第一列的数据
          if (Array.isArray(item.children) && item.children.length) {
              item.children.forEach((ele, inx) => {
                  // 如果选中的是第二列的数据
                  if (ele.id == this.data.deptId) {
                      multiIndex = [index, inx + 1, 0]
                      // this.setData({
                      //     // inx + 1的目的是因为我手动添加了一行，请选择这一行，所以实际下标应该+ 1
                      //     multiIndex: [index, inx + 1, 0],
                      // })
                      return
                  }
                  // 如果选中的不是第二列的数据
                  if (Array.isArray(ele.children) && ele.children.length) {
                      ele.children.forEach((element, ind) => {
                          // 如果选中的是第三列的数据
                          if (element.id == this.data.deptId) {
                              multiIndex = [index, inx + 1, ind + 1]
                              // this.setData({
                              //     // inx + 1， ind + 1的目的是因为我手动添加了一行，请选择这一行，所以实际下标应该+ 1
                              //     multiIndex: [index, inx + 1, ind + 1],
                              // })
                              return
                          }

                      })
                  }
              })
          }
      })
      // 在上面已经拿到了需要的下标，此时还需要拿到需要的是数据multiArray
      console.log('下标',multiIndex);
      // 此案例第一列固定，如果第一列也需要动态渲染，请根据接口来进行操作
      let  multiArray =  [['无脊柱动物', '脊柱动物'], ['请选择'],['请选择']]
      this.data.allArray[multiIndex[0]].children.forEach(item=>{
         multiArray[1].push(item.name)
      })
      if(multiIndex[1] != 0){
          this.data.allArray[multiIndex[0]].children[multiIndex[1]-1].children.forEach(ele=>{
              multiArray[2].push(ele.name)
          })
      }
      this.setData({
          multiArray: multiArray,
          multiIndex: multiIndex
      })
      console.log(multiArray, multiIndex);

  }
  // 封装多列组件，每一列都可以选择到，
  // multiArray：[],默认显示的数据，点开选择器，默认能看到的数据，如果不需要回显，可以写死为默认每列的第一条数据，有几个数据表示有几列，
  // multiIndex：[],表示每一列选中的数据的下标，从0开始，默认0,0,0
  // bindchange： 选中后触发，携带的参数为选中数据的列的下标
  // bindMultiPickerColumnChange：列滚动事件，当滚动列时触发，参数为滚动的列，与滚动到了哪一行数据的下标
  // 假设现在项目需要用到三列，没一列都需要能够单独选中，则手动给每一条数据增加一项   请选择   ，此时需要注意的事情是，当通过原始数据与拿到的
  // 数组下标multiIndex来拿到真实数据时，不能直接听过下标来拿到数据，因为我们手动在数据头部塞了一条数据，所以，我们需要
  // 在拿到的multiIndex基础上减1来获取正确的下标，从而获取正确的数据，
  // 当我们需要数据回显的时候，同样的我们先通过遍历拿到我们要回显数据的下标，注意此时拿到的下标是相对于原始数据的下标，而我们需要的小标需要在原始数据上面+1
  // 通常第一列是必须选中的，所以不需要在第一列上面添加  请选择 ， 
  // 如果是动态的列，可以先拿到数据后来判断有几列，基本三列够用了，我这里是通过children来判断是否还有子集的，
})
